<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#main{ text-align:center;}
#float{
	position:absolute;
	left:30px;
	top:60px; 
	z-index:1;
	}
#close{
	position:absolute;
	top:60px;
	left:134px;
	z-index:2;
	cursor:hand;
}

.float2{

	display: none;
	
}

.close2{
	
	display: none;
}
</style>
</head>
<body>
<div id="close" onClick="adv_close()"><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>

<script type="text/javascript">
	var floatTop;//层距页面顶端的距离
	var floatLeft;//左边的距离
	var floatObj;//层对象
	
	function adv_close(){
		
		document.getElementById("close").className="close2";
		document.getElementById("float").className="float2";
			}
		
function inxi(){
		floatObj=document.getElementById("float");//获得层对象
		if(floatObj.currentStyle){
			floatTop=parseInt(floatObj.currentStyle.top);
			floatLeft=parseInt(floatObj.currentStyle.left);
			
		}else{
			floatTop=parseInt(document.defaultView.getComputedStyle(floatObj,null).top);
			floatLeft=parseInt(document.defaultView.getComputedStyle(floatObj,null).left);
			
			
			
			
		}
		
		}
		function move(){


 var sTop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);  
	 var sLeft=parseInt(document.documentElement.scrollLeft||document.body.scrollLeft);
		
		floatObj.style.top=floatTop+sTop+"px";
		
		floatObj.style.left=floatLeft+sLeft+"px";
		
		
		}
		
		 window.onload= inxi;//页面加载调用函数 
          window.onscroll=move;//滚动条滚动效果
	
	
</script>
</body>
</html>
